<template>
  <div>
    <el-row
      v-if="fromInfo.designType !== '/buildquestionnaire.html'"
      style="position:inherit"
    >
      <el-col :span="9" class="propertyborder-title">
        <a-tooltip>
          <template slot="title"> 数据类型</template>
          数据类型
        </a-tooltip>
      </el-col>
      <el-col :span="15" class="propertyborder-content">
        <el-radio-group v-model="contdata.options.isRemote">
          <el-radio-button :label="true">动态数据</el-radio-button>
          <el-radio-button :label="false">静态数据</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <template v-if="contdata.options.isRemote === false">
      <el-col :span="9" class="propertyborder-title">
        <a-tooltip>
          <template slot="title">选项</template>
          选项
        </a-tooltip>
      </el-col>
      <el-col :span="15" class="propertyborder-content">
        <el-button
          type="button"
          size="mini"
          @click="addbutton"
          style="    float: right; margin-top: 5px;"
        >
          <i class="fa fa-plus"></i>&nbsp;添加
        </el-button>
      </el-col>

      <el-col :span="24" class="widget-config-container">
        <template>
          <draggable
            tag="ul"
            :list="contdata.options.options"
            v-bind="{
              group: { name: 'options1' },
              ghostClass: 'ghost',
              handle: '.drag-item'
            }"
            handle=".drag-item"
          >
            <li
              v-for="(item, index) in contdata.options.options"
              :key="index"
              style="background: lightgray;padding: 2px;margin-bottom:2px;"
            >
              <!-- <el-input placeholder="栅格值" size="mini" style="width: 100px;" type="number" v-model.number="item.span"></el-input> -->
              <el-radio
                :label="item.value"
                style="margin-right: 20px;"
                v-model="defaultValue"
              >
                <el-input
                  style="width: 45%;"
                  size="mini"
                  maxlength="50"
                  v-model="item.label"
                ></el-input>
                <el-input
                  style="width: 35%;"
                  size="mini"
                  maxlength="50"
                  v-model="item.value"
                  v-if="fromInfo.designType !== '/buildquestionnaire.html'"
                ></el-input>
                <i
                  class="drag-item"
                  style="font-size: 16px;margin: 0 2px;cursor: move;"
                >
                  <i class="iconfont icon-icon_bars"></i>
                </i>
                <el-button
                  @click="handleButtonRemove(index)"
                  circle
                  plain
                  type="danger"
                  size="mini"
                  icon="el-icon-minus"
                  style="padding: 2px;"
                ></el-button>
                <i
                  class="drag-item fa fa-bars"
                  style="font-size: 16px;margin: 0 5px;cursor: move;"
                ></i>
              </el-radio>
            </li>
          </draggable>
        </template>
      </el-col>
    </template>
    <template v-else>
      <el-col :span="9" class="propertyborder-title">
        <a-tooltip>
          <template slot="title"> 请求地址</template>
          请求地址
        </a-tooltip>
      </el-col>
      <el-col :span="15" class="propertyborder-content">
        <selectapi
          ref="selectapiId"
          :apicode.sync="sourceApi"
          methodType="1"
          :sourceApiId="sourceApiId"
          :controlInfo="contdata"
          :controlId="filed"
          :controlType="type"
          @select="selectapifun"
          :fromInfo="fromInfo"
        />
      </el-col>
      <el-col :span="9" class="propertyborder-title">
        <a-tooltip>
          <template slot="title"> 显示字段</template>
          显示字段
        </a-tooltip>
      </el-col>
      <el-col :span="15" class="propertyborder-content">
        <el-dropdown @command="selectlabelText">
          <el-input v-model="labelText" placeholder="请输入显示字段"></el-input>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in selectfiledList"
              :key="item.key"
              :command="item.key"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <el-col :span="9" class="propertyborder-title">
        <a-tooltip>
          <template slot="title"> Value字段</template>
          Value字段
        </a-tooltip>
      </el-col>
      <el-col :span="15" class="propertyborder-content">
        <el-dropdown @command="selectlabelValue">
          <el-input
            v-model="labelValue"
            placeholder="请输入Value字段"
          ></el-input>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in selectfiledList"
              :key="item.key"
              :command="item.key"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </template>
  </div>
</template>
<script>
/* eslint-disable */
import draggable from 'vuedraggable'
import selectapi from '@/components/formdesign/selectapi.vue'
export default {
  props: ['contdata', 'defaultValue'],
  data() {
    return {
      sourceApi: '',
      labelText: '',
      labelValue: '',
      sourceApiId: '',
      filed: '',
      type: '',
      selectfiledList: [],
      fromInfo: this.changeFromInfo()
    }
  },
  components: { draggable, selectapi },
  methods: {
    addbutton() {
      const index = this.contdata.options.options.length + 1
      this.contdata.options.options.push({
        value: index,
        label: '选项' + index
      })
    },
    handleButtonRemove(index) {
      this.contdata.options.options.splice(index, 1)
    },
    selectapifun(apicode) {
      this.contdata.options.sourceApi = apicode
      this.selectfiledList = []
      if (
        this.contdata.options.source !== null &&
        this.contdata.options.source !== undefined &&
        this.contdata.options.source.result !== undefined &&
        this.contdata.options.source.result !== null
      ) {
        for (const key in this.contdata.options.source.result.properties) {
          const item = this.contdata.options.source.result.properties[key]
          this.selectfiledList.push({ key: key, name: item.description })
        }
      }
    },
    selectlabelText(ctrl) {
      this.labelText = ctrl
    },
    selectlabelValue(ctrl) {
      this.labelValue = ctrl
    }
  },
  computed: {
    SetChangeFromInfo() {
      return this.changeFromInfo()
    }
  },
  created() {
    this.sourceApi = this.contdata.options.sourceApi
    this.sourceApiId = this.contdata.options.sourceApiId
    this.filed = this.contdata.options.filed
    this.type = this.contdata.type
    this.labelValue = this.contdata.options.labelValue
    this.labelText = this.contdata.options.labelText
    this.selectfiledList = []
    if (
      this.contdata.options.source !== null &&
      this.contdata.options.source !== undefined &&
      this.contdata.options.source.result !== undefined &&
      this.contdata.options.source.result !== null
    ) {
      for (const key in this.contdata.options.source.result.properties) {
        const item = this.contdata.options.source.result.properties[key]
        this.selectfiledList.push({ key: key, name: item.description })
      }
    }
  },
  watch: {
    contdata(newvalue) {
      // console.log(newvalue.options.sourceApiId)
      this.sourceApi = newvalue.options.sourceApi
      this.sourceApiId = newvalue.options.sourceApiId
      this.filed = newvalue.options.filed
      this.type = newvalue.type
      this.labelValue = newvalue.options.labelValue
      this.labelText = newvalue.options.labelText
    },
    sourceApi(newvalue) {
      this.contdata.options.sourceApi = newvalue
    },
    labelValue(newvalue) {
      this.contdata.options.labelValue = newvalue
    },
    labelText(newvalue) {
      this.contdata.options.labelText = newvalue
    },
    SetChangeFromInfo(val) {
      this.fromInfo = val
    }
  },
  inject: ['changeFromInfo']
}
</script>
<style scoped lang="less">
.propertyborder-title {
  height: 42px;
  line-height: 42px;
  padding-left: 3px;
  border: 1px solid #ccc;
  border-top: none;
  border-right: none;
}

.propertyborder-content {
  border: 1px solid #ccc;
  border-top: none;
  border-right: none;
  padding-right: 3px;
  padding-left: 3px;
  padding-top: 4px;
  padding-bottom: 4px;
  height: 42px;
}
/deep/ .el-radio-button__inner {
  padding: 10px 10px;
  font-size: 12px;
}
.widget-config-container {
  position: relative;

  .el-header {
    border-bottom: solid 2px #e4e7ed;
    padding: 0px;
  }

  .column-setting .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0 0 2px;
  }

  .config-content {
    border-left: solid 1px #e6e6e6;

    .el-form-item__label {
      padding: 0;
      font-weight: 500;
      float: none;
    }

    .el-form-item {
      /*border-bottom: solid 1px #e1e1e1;
            margin-bottom: 0px;*/
      margin: 5px;
    }
  }

  .ghost {
    background: #fff;
    border: 1px dashed #409eff;

    &::after {
      background: #fff;
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  ul {
    margin: 0;
    padding: 0;
  }

  li.ghost {
    list-style: none;
    font-size: 0;
    display: block;
    position: relative;
  }
}
</style>
